<template>
    <div class="home-recommond">
        <h1>热门歌手</h1>
        <div class="wrapper" ref="wrapper">
            <!-- 滚动所需的容器 -->
            <ul class="content" ref="content">

                <!-- 滚动所需的容器 -->
                <li v-for="(item, index) in listData" :key="index" @click="selectItem(item)">
                    <div class="cover">
                        <van-image :src="item.singer_pic" radius="1rem" />
                        <!-- <span>{{item.listen_num | numFilter(1)}}万</span> -->
                    </div>
                    <span>{{ item.singer_name }}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { betterScrollHorizontal } from "@/common/betterScroll.js";
export default{
    data() {
        return {
            listData: []
        }
    },
    /**
     * 一个vue实例被生成后会调用created函数
     * 一般可以在此函数中调用ajax获取页面初始化所需的数据
     */
    created() {
        this.getSongListData()
       
    },

    methods: {
        //获取推荐歌单数据
        getSongListData() {
            this.$request('get', '/singer/list').then(res => {
                console.log(res)
                if (res.result == 100) {
                    this.listData = res.data.list;
                }
                //异步数据的一些处理
                betterScrollHorizontal(
                    this,
                    this.$refs.wrapper,
                    this.$refs.content,
                    this.listData.length,
                    10
                );
            });
        },

        selectItem(item) {
            const id = item.singer_mid;//获取歌单的id
            // console.log("----------------" + id);控制台输出歌单id
           
            //1.调用状态管理，commit提交唤醒mutations
            // this.$store.commit('saveSinger',item)

            //2.调用状态管理，通过分发action方法
            this.$store.dispatch('saveSinger',item)

            this.$router.push({ path: `/singerhome/${id}` })

             //1.编程式导航带有路径的对象方式
            //``模板字符串
            //2.编程式导航，字符串路径方式
            /*
            this.$router.push(`/songlist/${id}`;)
            */
            /*3.编辑式导航，命名的路由，并加上参数建立url
            this.$router.push({
                name:"songlist",
                params:{
                    id:id //等同于id
                }
               
            }) 
            */
        },

    },

};
</script>

<style scoped>
.cover {
    position: relative;
}

.cover>span {
    position: absolute;
    right: 0.2rem;
    bottom: 0.4rem;
    background-color: #a6a0a0;
    color: white;
    font-size: 14px;
    border-radius: 1rem;
    width: 5rem;
    display: inline-block;
}

.wrapper {
    width: 100%;
    /*容器的宽度就是屏幕的宽度*/
    overflow: hidden;
}

/* content内容区的宽度要大于wrapper容器的宽度，12个列表项 */
/* ul.content{
    width: calc(12 * 10rem);
} */
ul.content li {
    /* li默认是块级元素，修改为行内元素，但是要具备块级元素的特性 */
    display: inline-block;
    width: 10rem;
    vertical-align: top;
    /*垂直方向的位置 */
}

ul.content li * {
    margin: 0.1rem;
    /*里面的元素与li的边缘有个间距*/
}

ul.content li>span {
    font-size: 0.8rem;
    color: #54493b;
}
</style>